<template>
    <div class="w-full">
        <SavePage :title="title">
            <div slot="title" class="mr-4">
                <span class="font-normal text-gray-800">事发时间: {{ time }}</span>
            </div>
            <template slot="buttons">
                <BaseButton v-permission="{ btnCode: 'dlyh_c11_d37_2' }" @click="handleEdit">编辑</BaseButton>
            </template>
            <template slot="body" class="w-full">
                <section v-loading="loading" class="mt-6">
                    <BasicInfo />
                </section>
            </template>
        </SavePage>
    </div>
</template>
<script>
import { mapState } from 'vuex'
import BasicInfo from './components/BasicInfo'
export default {
    name: 'FlawDetail',
    components: {
        BasicInfo
    },
    data() {
        return {
            id: null,
            number: null,
            time: null
        }
    },
    computed: {
        ...mapState(['loading']),
        title() {
            return this.number
        }
    },
    created() {
        this.getDeatil()
    },
    methods: {
        async getDeatil() {
            this.id = +this.$route.query.id
            this.number = this.$route.query.number
            this.time = this.$route.query.time
            const res = await this.$store.dispatch('trafficIncident/detail', { id: this.id, edit: false })
            console.log('res :>> ', res)
        },
        handleEdit() {
            this.$router.push({
                name: 'EditEvent',
                query: {
                    id: this.id,
                    number: this.number
                }
            })
        }
    }
}
</script>

<style lang="scss">
.el-card__header {
    background-color: #fafafa;
    padding: 10px 20px;
}
.el-card.is-always-shadow,
.el-card.is-hover-shadow:focus,
.el-card.is-hover-shadow:hover {
    box-shadow: 0 0px 0px 0 rgb(0 0 0 / 10%);
}
</style>
